<template>
  <div id="app">
    <input type="text" v-model="msg" >
    <p>{{ msg }}</p>
    <!-- ----------------------- 过滤器 ----------------------- -->
    <!-- 过滤器版本 -->
    <h4>{{ time | formatTime }}</h4>
    <h4>{{ time | globalTime }}</h4>
    <!-- 方法版本 -->
    <h4>{{ formatTimeFunc(time) }}</h4>
    <!-- 计算属性做 -->
    <h4>{{ comFormatTime }}</h4>


    <!-- ----------------------- 计算属性 ----------------------- -->
    <!-- 计算属性版本 -->
    <ul>
      <li v-for="item in foodsArr">
        {{ item }}
      </li>
    </ul>
    <!-- 方法版本 -->
    <ul>
      <li v-for="item in foodsArrFunc()">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'App',
  data() {
    return {
      time: 1646171185000,
      foods: '🥟,🍜,🍚,🍍',
      msg: ''
    }
  },

  // 局部过滤器：在哪定义就只能在哪使用
  filters: {
    formatTime(t) {
      return dayjs(t).format('YYYY年MM月DD日 HH:mm:ss')
    },
  },
  computed: {
    foodsArr() {
      console.log('计算属性--foodsArr')
      return this.foods.split(',')
    },

    // 计算属性
    comFormatTime () {

      return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
    }
  },
  methods: {
    formatTimeFunc(time) {
      
      return dayjs(time).format('YYYY年MM月DD日 HH:mm:ss')
    },
    foodsArrFunc() {

        console.log('函数--foodsArrFunc')
      // 逻辑略
      return this.foods.split(',')
    },
  },
}
</script>


<style>


</style>